<template>
	<div>
		<el-row :span="24">
			<!-- pc -->
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex" :navs="navs" :changeNav="changeNav"></PcDrawer>
					<div class="bghhhhh" style="overflow: scroll;height: 100vh;padding-bottom: 50px;">
						<div class="rightCon">
							<headerPcTow :title="$t('l_meiriqiandao')" isShow="true" isShowTowBut="true"></headerPcTow>
							<div class="cwerfew">
								<div class="top">
									<div class="left">
										<p>{{$t('l_yilianxuqiandao')}} <span>0</span>{{$t('l_tian')}}</p>
										<p>{{$t('l_yilingqu')}} <span>0.00</span></p>
									</div>
									<div class="right">
										<p>{{$t('l_suoxuchongzhi')}} <span>0.00/100.00</span></p>
										<p>{{$t('l_suoxutouzhu')}} <span>0.00/888.00</span></p>
									</div>
								</div>

								<div class="botcon">
									<div class="it" v-for="(it,ind) in 7">
										<div class="itTop">
											<p>{{$t('l_diyitian')}}{{it}}{{$t('l_tian')}}</p>
											<img src="https://company-fj.s3.ap-east-1.amazonaws.com/siteadmin/active/img_qdbx1.png"
												alt="">
										</div>
										<div class="itBot">
											{{$t('l_shenmidajiang')}}
										</div>
									</div>
								</div>
							</div>
							<div class="cwerfew daffv">
								<p>{{$t('l_huodongneirong')}}:</p>
								<p>{{$t('l_huodongneirong1')}}<br />
									{{$t('l_huodongneirong2')}}<br />
									{{$t('l_huodongneirong3')}}<br />
									{{$t('l_huodongneirong4')}}:<br />
									{{$t('l_huodongneirong5')}}<br />
									{{$t('l_huodongneirong6')}}<br />
									{{$t('l_huodongneirong7')}}<br />
									{{$t('l_huodongneirong8')}}<br />
									{{$t('l_huodongneirong9')}}
								</p>
							</div>

							<div class="huodongbiaoti">
								{{$t('l_quanbuhuodong')}}
							</div>

							<div class="huodongList">
								<div class="Butt" @click="scroll">
									< </div>
										<ul>
											<li v-for="(it,ind) in 10" :class="{adfs:ind==0}">
												<img src="https://zswsql-266-ppp.oss-accelerate.aliyuncs.com/active/ActiveImg1081069799380623.png"
													alt="">
												<div class="product_tip" v-if="ind==0">
													<div class="product_tip_bg"></div>
													<p>✓</p>
												</div>
											</li>
										</ul>
										<div class="Butt" @click="scroll">
											>
										</div>
								</div>
							</div>
						</div>
					</div>
			</el-col>
			<!-- h5 -->
			<el-col :sm="0" :xs="24">
				<navHeader :title="$t('l_guanyu')" :conTitleTow="$t('l_lingqujilu')"></navHeader>
				<div class="sdafadf">

					<div class="cwerfewTow">
						<div class="top">
							<div class="left">
								<p>{{$t('l_yilianxuqiandao')}} <span>0</span>{{$t('l_tian')}}</p>
								<p>{{$t('l_yilingqu')}} <span>0.00</span></p>
							</div>
							<div class="right">
								<p>{{$t('l_suoxuchongzhi')}} <span>0.00/100.00</span></p>
								<p>{{$t('l_suoxutouzhu')}} <span>0.00/888.00</span></p>
							</div>
						</div>
					</div>
					<div class="cwerfewTow sfasd">
						<div class="it" v-for="(it,ind) in 7">
							<div class="itTop">
								<p>{{$t('l_diyitian')}}{{it}}{{$t('l_tian')}}</p>
								<img src="https://company-fj.s3.ap-east-1.amazonaws.com/siteadmin/active/img_qdbx1.png"
									alt="">
							</div>
							<div class="itBot">
								{{$t('l_shenmidajiang')}}
							</div>
						</div>
					</div>
					<div class="cwerfewTow daffvTow">
						<p>{{$t('l_huodongneirong')}}:</p>
						<p>{{$t('l_huodongneirong1')}}<br />
							{{$t('l_huodongneirong2')}}<br />
							{{$t('l_huodongneirong3')}}<br />
							{{$t('l_huodongneirong4')}}:<br />
							{{$t('l_huodongneirong5')}}<br />
							{{$t('l_huodongneirong6')}}<br />
							{{$t('l_huodongneirong7')}}<br />
							{{$t('l_huodongneirong8')}}<br />
							{{$t('l_huodongneirong9')}}
						</p>
					</div>
					<div class="huodongListTow">
						<ul>
							<li v-for="(it,ind) in 10" :class="{adfs:ind==0}">
								<img src="https://zswsql-266-ppp.oss-accelerate.aliyuncs.com/active/ActiveImg1081069799380623.png"
									alt="">
								<div class="product_tip" v-if="ind==0">
									<div class="product_tip_bg"></div>
									<p>✓</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="adfasD">
					<div class="asdfa">
						{{$t('l_fanhui')}}
					</div>
					<div class="dfsf">
						{{$t('l_qiandao')}}
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import headerPcTow from '../../components/headerPcTow.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer,
			headerPcTow
		},
		data() {
			return {
				info: null,
				selecttab: 0,
				navIndex: 0,
				navs: [{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_dtfl_dz_0',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_dtfl_qp_0',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_dtfl_by_0',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_dtfl_zr_0',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_dtfl_ty_0',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_dtfl_cp_0',
					},
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				]
			}
		},
		created() {
			this.ArticleGetDetail(26)
		},
		methods: {
			scroll() {},
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav(item) {
				this.$router.push('/')
			},
			ArticleGetDetail(id) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.ArticleGetDetail({
					id: id,
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.info = res.data
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			changetab(e) {
				this.selecttab = e;
			},
		}
	}
</script>

<style scoped lang="less">
	* {
		box-sizing: border-box;
	}

	.sdafadf {
		height: 93vh;
		overflow-y: scroll;
		margin: 0 auto;
		padding-bottom: 100px;
	}

	html {
		overflow-y: scroll;
	}

	:root {
		overflow-y: auto;
		overflow-x: hidden;
	}

	:root body {
		position: absolute;
	}

	body {
		width: 100vw;
		overflow: hidden;
	}

	/* pc */
	.bghhhhh {
		flex: 1;
		height: 300px;
	}

	.rightCon {
		width: 75%;
		margin: 0 auto;
	}

	.rightConBox {
		padding: 15px 0px;
		box-sizing: border-box;
		background-color: var(--theme-main-bg-color);
		border-radius: 4px;
		margin-top: 20px;
	}

	//pc
	.cwerfew {
		width: 100%;
		padding: 15px 15px;
		box-sizing: border-box;
		background-color: var(--theme-main-bg-color);
		border-radius: 4px;
		margin-top: 20px;

		.top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: var(--theme-text-color-lighten);
			font-size: 14px;

			.left {
				display: flex;
				align-items: center;

				p:nth-child(1) {
					span {
						margin-left: 5px;
						color: var(--theme-text-color);
					}
				}

				p:nth-child(2) {
					margin-left: 30px;

					span {
						margin-left: 5px;
						color: var(--theme-secondary-color-finance);
					}
				}
			}

			.right {
				display: flex;
				align-items: center;

				p {
					span {
						margin-left: 5px;
						color: var(--theme-text-color);
					}
				}

				p:nth-child(2) {
					margin-left: 30px;
				}
			}
		}

		.botcon {
			width: 100%;
			margin-top: 15px;
			background-color: var(--theme-bg-color);
			border-radius: 4px;
			padding: 0px 20px 20px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.it {
				width: 20%;
				background-color: var(--theme-main-bg-color);
				border: 1px solid var(--theme-color-line);
				border-radius: 10px;
				padding: 10px;
				box-sizing: border-box;
				margin: 20px 20px 0px;

				.itTop {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					color: var(--theme-text-color-lighten);
					font-size: 14px;
					padding-top: 20px;

					img {
						width: 100px;
						height: 100px;
					}
				}

				.itBot {
					font-size: 15px;
					text-align: center;
					padding-top: 10px;
					box-sizing: border-box;
					border-top: 1px solid var(--theme-color-line);
					color: var(--theme-secondary-color-finance);
				}
			}
		}
	}

	.daffv {
		color: var(--theme-text-color);

		p:nth-child(1) {
			font-size: 16px;
		}

		p:nth-child(2) {
			font-size: 14px;
			line-height: 25px;
			margin-top: 5px;
		}
	}

	.huodongbiaoti {
		text-align: center;
		font-size: 18px;
		color: var(--theme-text-color);
		margin: 20px 0px;
	}

	.huodongbiaoti:before {
		content: '';
		top: 50%;
		left: 0;
		width: 45%;
		height: 1px;
		border-bottom: 1px solid var(--theme-color-line);
		display: inline-block;
		margin-right: 5px;
		margin-bottom: 4px;
	}

	.huodongbiaoti:after {
		content: '';
		top: 50%;
		right: 0;
		width: 45%;
		height: 1px;
		border-bottom: 1px solid var(--theme-color-line);
		display: inline-block;
		margin-left: 5px;
		margin-bottom: 4px;
	}

	.huodongList {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.Butt {
			width: 45px;
			height: 45px;
			border-radius: 50%;
			font-size: 20px;
			text-align: center;
			line-height: 45px;
			color: var(--theme-primary-color);
			background-color: var(--theme-main-bg-color);
			border: 1px solid var(--theme-color-line);
			cursor: pointer;
		}

		ul {
			display: flex;
			overflow-x: scroll;
			overflow-y: hidden;
			width: 90%;
			height: auto;
			align-items: center;

			li {
				margin-right: 20px;
				height: auto;
				position: relative;
				padding: 5px;

				img {
					width: 200px;
					height: 80px;
				}

				.product_tip {
					position: absolute;
					top: 0;
					right: 0;
					width: 20px;
					height: 20px;
					text-align: right;

					p {
						font-size: 12px;
						color: #fff;
						position: absolute;
						top: 77px;
						right: 1px;
					}

					.product_tip_bg {
						width: 0;
						height: 0;
						border-radius: 5px;
						border-bottom: 13px solid #035ffc;
						border-right: 13px solid transparent;
						border-left: 14px solid transparent;
						position: absolute;
						transform: rotate(135deg);
						bottom: -73px;
						right: -9px;
					}
				}
			}

			.adfs {
				border: 1px solid var(--theme-primary-color);
			}
		}
	}

	//h5

	.cwerfewTow {
		width: 95%;
		margin: 10px auto 0;
		padding: 15px 15px;
		box-sizing: border-box;
		background-color: var(--theme-main-bg-color);
		border-radius: 4px;

		.top {
			width: 100%;
			color: var(--theme-text-color-lighten);
			font-size: 14px;

			.left {
				display: flex;
				align-items: center;

				p:nth-child(1) {
					span {
						margin-left: 5px;
						color: var(--theme-text-color);
					}
				}

				p:nth-child(2) {
					margin-left: 30px;

					span {
						margin-left: 5px;
						color: var(--theme-secondary-color-finance);
					}
				}
			}

			.right {
				display: flex;
				align-items: center;

				p {
					span {
						margin-left: 5px;
						color: var(--theme-text-color);
					}
				}

				p:nth-child(2) {
					margin-left: 30px;
				}
			}
		}

		.it {
			width: 22%;
			background-color: var(--theme-main-bg-color);
			border: 1px solid var(--theme-color-line);
			border-radius: 10px;
			padding: 10px;
			box-sizing: border-box;
			margin: 10px 5px 0px;

			.itTop {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: var(--theme-text-color-lighten);
				font-size: 12px;
				padding-top: 10px;

				img {
					width: 50px;
					height: 50px;
				}
			}

			.itBot {
				font-size: 13px;
				text-align: center;
				padding-top: 10px;
				box-sizing: border-box;
				border-top: 1px solid var(--theme-color-line);
				color: var(--theme-secondary-color-finance);
			}
		}
	}

	.sfasd {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 0px;
	}

	.daffvTow {
		color: var(--theme-text-color);

		p:nth-child(1) {
			font-size: 16px;
		}

		p:nth-child(2) {
			font-size: 14px;
			line-height: 25px;
			margin-top: 5px;
		}
	}

	.huodongbiaoti {
		text-align: center;
		font-size: 18px;
		color: var(--theme-text-color);
		margin: 20px 0px;
	}

	.huodongbiaoti:before {
		content: '';
		top: 50%;
		left: 0;
		width: 45%;
		height: 1px;
		border-bottom: 1px solid var(--theme-color-line);
		display: inline-block;
		margin-right: 5px;
		margin-bottom: 4px;
	}

	.huodongbiaoti:after {
		content: '';
		top: 50%;
		right: 0;
		width: 45%;
		height: 1px;
		border-bottom: 1px solid var(--theme-color-line);
		display: inline-block;
		margin-left: 5px;
		margin-bottom: 4px;
	}

	.huodongListTow {
		width: 95%;
		margin: 10px auto 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		ul {
			display: flex;
			overflow-x: scroll;
			overflow-y: hidden;
			width: 100%;
			align-items: center;

			li {
				position: relative;
				margin-right: 5px;
				height: auto;
				border: 1px solid transparent;
				padding: 5px;
				border-radius: 5px;

				img {
					width: 100px;
					height: 50px;
				}

				.product_tip {
					position: absolute;
					top: 0;
					right: 0;
					width: 20px;
					height: 20px;
					text-align: right;

					p {
						font-size: 12px;
						color: #fff;
						position: absolute;
						top: 47px;
						right: 1px;
					}

					.product_tip_bg {
						width: 0;
						height: 0;
						border-radius: 5px;
						border-bottom: 13px solid #035ffc;
						border-right: 13px solid transparent;
						border-left: 14px solid transparent;
						position: absolute;
						transform: rotate(135deg);
						bottom: -43px;
						right: -9px;
					}
				}
			}

			.adfs {
				border: 1px solid var(--theme-primary-color);
			}
		}
	}

	.adfasD {
		width: 100%;
		padding: 10px;
		background-color: var(--theme-main-bg-color);
		bottom: 0;
		box-shadow: 0 -10px 2px 0 rgb(0 0 0 / 10%);
		left: 0;
		position: fixed;
		width: 100%;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.asdfa {
			width: 49%;
			height: 36px;
			line-height: 36px;
			text-align: center;
			font-size: 13px;
			border: 1px solid;
			border-color: var(--theme-ant-primary-color-0);
			color: var(--theme-ant-primary-color-0);
			border-radius: 5px;
		}

		.dfsf {
			width: 49%;
			height: 36px;
			line-height: 36px;
			text-align: center;
			font-size: 13px;
			border: 1px solid;
			background-color: var(--theme-disabled-bg-color);
			border-color: var(--theme-disabled-bg-color);
			color: var(--theme-disabled-font-color);
			border-radius: 5px;
		}
	}
</style>